<template>
    <div class="formContainer">
        <!-- <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item label="成本类型:" style="height:80px">
                <el-select v-model="form.costType" placeholder="请选择成本类型" size="medium">
                    <el-option label="类型一" value="1"></el-option>
                </el-select>
            </el-form-item>
        </el-form> -->
        <el-row type="flex" justify-content="left" style="width:360px">
            <el-button type="primary" icon="el-icon-download" @click="exportFile">模板下载</el-button>
        </el-row>
        <el-upload class="upload-demo" drag action="http://10.108.224.78:30007/materiel/cost/maintain/v1/upload"
            ref="upload" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
            :before-upload="beforeUpload" :file-list="fileList" :http-request="httpReq" :auto-upload="false" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传模板csv文件</div>
        </el-upload>
        <el-row style="margin-top:20px;width:360px;">
            <!-- <el-button size="medium">
                取消
            </el-button> -->
            <el-button type="primary" size="medium" @click="submitUpload" style="float: right;">
                确定
            </el-button>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
import { downLoadTpl, uploadCsv } from '@/requests/api/material';
import { Message } from 'element-ui';
import { Ref, ref } from 'vue';
import { useDownCsv } from '@/hooks/useDownCsv';
import { baseURL } from "@/requests/api/material";

const { exportFile } = useDownCsv(downLoadTpl, `${baseURL}/materiel/cost/maintain/v1/downTemplate`) // 返回的是字符串没有blob类型

const fileList: Ref<Array<any>> = ref([])
const handlePreview = (file: any) => {
    console.log(file);
}
const handleRemove = (file: any, fileList: Array<any>) => {
    console.log(file, fileList);
}
const beforeRemove = (file: any, fileList: Array<any>) => {
    console.log(file, fileList);
}
const beforeUpload = (file: any, fileList: Array<any>) => {
    console.log(file, fileList);
    if (file.type === "text/csv") {

    } else {
        Message.error("仅支持csv格式的文件上传")
        return false
    }
}
const httpReq = async (file: any) => {
    const params = new FormData();
    params.append('files', file.file)
    const res = await uploadCsv(params)
    console.log('file', file, '返回结果', res)
    if (res && (res as any).code === 200) {
        Message.success(file.file.name + "上传成功!")
    } else {
        Message.error(file.file.name + "上传失败!")
    }
}
const upload: Ref<any> = ref(null)
const submitUpload = () => {
    upload.value.submit()
}
</script>
<style lang="scss" scoped>
.upload-demo {
    margin-top: 10px;

    .el-upload__tip {
        font-weight: 600;
        color: $danger;
    }
}
</style>